import { Button, Card, message } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProForm, { ProFormDatePicker, ProFormInstance } from '@ant-design/pro-form';
import StatisticsCard from '@/components/StatisticsCard/Index';
import './style.less';
import BreadcrumbDept from '@/components/BreadcrumbDept';
import { getOrderSaleData, downOrderSaleDataForDetail } from '@/services/report/api';
import { showMsg,subtractDays, currentDate, isNull } from '@/utils/utils';
import moment from 'moment';
import PermissionControl from '@/components/PermissionControl';
import { history } from 'umi';

const Index: React.FC = () => {
  const formRef = useRef<ProFormInstance>();
  const [detail, setDetail] = useState({});
  const [loading, setLoading] = useState<boolean>(false);
  const [searchParams, setSearchParams] = useState({});

  useEffect(() => {
    formRef.current?.setFieldsValue({
      start: subtractDays(30),
      end: currentDate(),
    });
    formRef.current?.submit();
  }, [])

  const getList = async(values: any) => {
    try {
      console.log('params', values)
      // return;
      const params = {
        start: moment(values.start).format('YYYYMMDD'),
        end: moment(values.end).format('YYYYMMDD')
      }
      setSearchParams(params);
      const data = await getOrderSaleData(params);
      setDetail(data);
    } catch (error) {
      showMsg(error?.data?.errmsg); 
    }
  }
  
  const download = async() => {
    setLoading(true);
    await downOrderSaleDataForDetail(searchParams).then(res => {
      setLoading(false);
      window.open(`/api/report/${res.file_token}/down`);
    }).catch(res => {
      setLoading(false);
    });
  }

  return (
    <PageContainer className='ordersalePage' extra={[
      <BreadcrumbDept />
     ]} breadcrumb={{}}>
      <div style={{background: '#fff', padding: 10, marginBottom: 5}}>
        <ProForm
          formRef={formRef}
          onFinish={getList}
          submitter={{
            searchConfig: {
              submitText: '查询',
            },
            render: (props, doms) => {
              doms.shift();
              return [
                ...doms,
                <PermissionControl action_id="700701001">
                  <Button key="export" type="primary" loading={loading} onClick={download}>导出报表</Button>
                </PermissionControl>
              ];
            },
          }}
          layout="inline">
          <ProForm.Group>
            <ProFormDatePicker name='start' allowClear={false} label="下单周期" />
            <span style={{ marginRight: 16 }}>-</span>
            <ProFormDatePicker name='end' allowClear={false} />
          </ProForm.Group>
        </ProForm>
      </div>
      
      <div className='StatisticsCard' style={{ background: '#fff', padding: 12 }}>
        <div style={{marginBottom: 15, display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <StatisticsCard iconType="database" title="周期销售单数" number={detail.totalOrderNum}/>
          <StatisticsCard  title="周期订单总额" number={`￥${detail.totalOrderPrice}`}/>
          <StatisticsCard iconType="database" title="周期退款单数" number={detail.totalRefundOrderNum}/>
          <StatisticsCard style={{marginRight: 0}} title="周期退款总额" number={`￥${detail.totalRefundOrderPrice}`}/>
        </div>

        <Card title="销售统计" style={{marginBottom: 15}} extra={<PermissionControl action_id="700701002">
          <a onClick={() => history.push({
            pathname: '/report/order-sale-statistics/detail',
            query: {
              start: searchParams.start as string,
              end: searchParams.end as string,
              handleType: 'P',
            }
          })}>查看详情</a></PermissionControl>
        }>
          <div className="card-inner">
            <div className="card-side">
              <div className="side-item">
                <div className="title">待付款订单数</div>
                <div className="num">{detail.totalWaitNum}</div>
              </div>
              <div className="side-item">
                <div className="title">待付款金额</div>
                <div className="num">￥{detail.totalWaitPrice}</div>
              </div>
              <div className="side-item">
                <div className="title">已付款订单数</div>
                <div className="num">{detail.totalPayNum}</div>
              </div>
              <div className="side-item">
                <div className="title">已付款金额</div>
                <div className="num">￥{detail.totalPayPrice}</div>
              </div>
            </div>
            <div className="card-content">
              <div className="block-card">
                <div className="title">一次性订单</div>
                <div className="block-card-content">
                  <div className="block-card-item">
                    <span>待付款订单</span>
                    <span>{detail.oneWaitPayNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>待付款金额</span>
                    <span>￥{detail.oneWaitPayPrice}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已付款订单</span>
                    <span>{detail.onePayNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已付款金额</span>
                    <span>￥{detail.onePayPrice}</span>
                  </div>
                </div>
              </div>
              <div className="block-card">
                <div className="title">计划订单</div>
                <div className="block-card-content">
                  <div className="block-card-item">
                    <span>待付款订单</span>
                    <span>{detail.waitPlanOrderNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>待付款金额</span>
                    <span>￥{detail.waitPlanOrderPrice}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已付款订单</span>
                    <span>{detail.payPlanOrderNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已付款金额</span>
                    <span>￥{detail.payPlanOrderPrice}</span>
                  </div>
                </div>
              </div>
              <div className="block-card">
                <div className="title">小程序订单</div>
                <div className="block-card-content">
                  <div className="block-card-item">
                    <span>待付款订单</span>
                    <span>{detail.shopWaitPayNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>待付款金额</span>
                    <span>￥{detail.shopWaitPayPrice}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已付款订单</span>
                    <span>{detail.shopPayNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已付款金额</span>
                    <span>￥{detail.shopPayPrice}</span>
                  </div>
                </div>
              </div>
            </div>
          
          </div>
        </Card>

        <Card title="退款统计" extra={<PermissionControl action_id="700701002">
          <a onClick={() => history.push({
            pathname: '/report/order-sale-statistics/detail',
            query: {
              start: searchParams.start as string,
              end: searchParams.end as string,
              handleType: 'R',
            }
          })}>查看详情</a>
        </PermissionControl>}>
          <div className="card-inner">
            <div className="card-side">
              <div className="side-item">
                <div className="title">待退款订单数</div>
                <div className="num">{detail.totalWaitRefundNum}</div>
              </div>
              <div className="side-item">
                <div className="title">待退款金额</div>
                <div className="num">￥{detail.totalWaitRefundPrice}</div>
              </div>
              <div className="side-item">
                <div className="title">已退款订单数</div>
                <div className="num">{detail.totalRefundNum}</div>
              </div>
              <div className="side-item">
                <div className="title">已退款金额</div>
                <div className="num">￥{detail.totalRefundPrice}</div>
              </div>
            </div>
            <div className="card-content">
              <div className="block-card">
                <div className="title">一次性订单</div>
                <div className="block-card-content">
                  <div className="block-card-item">
                    <span>待退款订单</span>
                    <span>{detail.oneWaitRefundNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>待退款金额</span>
                    <span>￥{detail.oneWaitRefundPrice}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已退款订单</span>
                    <span>{detail.oneRefundNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已退款金额</span>
                    <span>￥{detail.oneRefundPrice}</span>
                  </div>
                </div>
              </div>
              {/* <div className="block-card">
                <div className="title">计划订单</div>
                <div className="block-card-content">
                  <div className="block-card-item">
                    <span>待退款订单</span>
                    <span>10000</span>
                  </div>
                  <div className="block-card-item">
                    <span>待退款金额</span>
                    <span>￥100000.00</span>
                  </div>
                  <div className="block-card-item">
                    <span>已退款订单</span>
                    <span>10000</span>
                  </div>
                  <div className="block-card-item">
                    <span>已退款金额</span>
                    <span>￥100000.00</span>
                  </div>
                </div>
              </div> */}
              <div className="block-card">
                <div className="title">小程序订单</div>
                <div className="block-card-content">
                  <div className="block-card-item">
                    <span>待退款订单</span>
                    <span>{detail.shopWaitRefundNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>待退款金额</span>
                    <span>￥{detail.shopWaitRefundPrice}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已退款订单</span>
                    <span>{detail.shopRefundNum}</span>
                  </div>
                  <div className="block-card-item">
                    <span>已退款金额</span>
                    <span>￥{detail.shopRefundPrice}</span>
                  </div>
                </div>
              </div>
              <div className="block-card" style={{ border: 0 }}></div>
            </div>
          </div>
        </Card>
      </div>
    </PageContainer>
  );
};
export default Index;
